<?php $this->load->view('provider/template/_begin') ?>
<script language="javascript" type="text/javascript" src="<?php echo base_url() . APPPATH ?>themes/provider/js/jquery.flot.js"></script>

<link rel="stylesheet" media="screen" type="text/css" href="<?php echo base_url() . APPPATH ?>themes/datepicker/css/datepicker.css" />
<script type="text/javascript" src="<?php echo base_url() . APPPATH ?>themes/datepicker/js/datepicker.js"></script>

<style>
  .xAxis > .tickLabel 
  {
    margin-bottom:40px;
    -moz-transform:rotate(60deg);
    -o-transform:rotate(60deg);
    -webkit-transform:rotate(60deg);
    -ms-transform: rotate(60deg); /* IE9 */
    transform: rotate(60deg);
  }
</style>
<div style="text-align: center">
  <form action="<?php echo site_url('provider/statistic') ?>" method="post">
    From: <input type="text" class="inputDate" name="from" id="from_date" value="<?php echo date('m/d/Y', $min) ?>"/>
    To : <input type="text" class="inputDate" name="to" id="to_date" value="<?php echo date('m/d/Y', $max) ?>">
    <input type="submit" onclick="jQuery('form').attr('action', '<?php echo site_url('provider/statistic')?>')" value="Statistics"/>
    <input type="submit" onclick="jQuery('form').attr('action', '<?php echo site_url('provider/statistic/excel')?>')" value="Download excel"/>
  </form>
</div>
<p id="choices">Promotions:</p>
<div id="placeholder" style="width:100%;height:400px;"></div>
<script type="text/javascript">
  var dates = [<?php echo $dates ?>];
  $(function () {    
    /** date picker */
    $('#from_date').DatePicker({
      format:'m/d/Y',
      date: $('#from_date').val(),
      current: $('#from_date').val(),
      starts: 1,position: 'r',
      onBeforeShow: function(){
        $('#from_date').DatePickerSetDate($('#from_date').val(), true);
      },
      onChange: function(formated, dates){
        $('#from_date').val(formated);
      }
    });
    $('#to_date').DatePicker({
      format:'m/d/Y',
      date: $('#to_date').val(),
      current: $('#to_date').val(),
      starts: 1,position: 'r',
      onBeforeShow: function(){
        $('#to_date').DatePickerSetDate($('#to_date').val(), true);
      },
      onChange: function(formated, dates){
        $('#to_date').val(formated);
      }
    });
    /** plot */
    var datasets = <?php echo $datasets ?>;
    var i = 0;
    $.each(datasets, function(key, val) {
      val.color = i;
      ++i;
    });
    $.each(datasets, function(key, val) {
      $("#choices").append('<br/><input type="checkbox" name="' + key +
        '" checked="checked" id="id' + key + '"><label for="id' + key + '">'
        + val.label + '</label>');
    });
    $("#choices").find("input").click(plotAccordingToChoices);    
    function plotAccordingToChoices() {
      var data = [];
      $("#choices").find("input:checked").each(function () {
        var key = $(this).attr("name");
        if (key && datasets[key])
          data.push(datasets[key]);
      });
      if (data.length > 0)
        $.plot($("#placeholder"), data, {
          grid: { hoverable: true},
          series: {lines: { show: true },points: { show: true }},
          xaxis: { ticks: [<?php echo $ticks ?>] },
          yaxis: {min:0,tickDecimals:0}
        });
      $("#placeholder").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x);
        $("#y").text(pos.y);
        if (item) {
          if (previousPoint != item.dataIndex) {
            previousPoint = item.dataIndex;                    
            $("#tooltip").remove();
            var x = item.datapoint[0],
            y = item.datapoint[1];
            showTooltip(item.pageX, item.pageY,
            'Have '+y+' people(s) downloaded "'+item.series.label+'" on ' + dates[x]);
          }
        }
        else {
          $("#tooltip").remove();
          previousPoint = null;            
        }
      });
      $('.legend div').css('background','none');
    }
    function showTooltip(x, y, contents) {
      $('<div id="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        display: 'none',top: y + 5,left: x + 5,
        border: '1px solid #fdd',padding: '2px',
        'background-color': '#fee',opacity: 0.80
      }).appendTo("body").fadeIn(200);
    }
    plotAccordingToChoices();
  });
</script>
<?php $this->load->view('provider/template/_end') ?>